<template>
  <div>
    <div id="print-a" style="padding: 20px;">
      <a-row style="text-align: center;font-size: 26px;font-weight: 550;color: rgba(0, 0, 0, 0.85)">{{ data.Name||'' }}<span v-if="data.Name">销货清单</span></a-row>
      <a-row style="font-size: 16px;font-weight: 550;color: rgba(0, 0, 0, 0.85)">
        <a-col :span="12" style="text-align: left;">购货单位:{{ data.SalesName }}</a-col>
        <a-col :span="12" style="text-align: right;">发货日期:{{ this.timeFormat(data.Issuancedata,'YYYY年MM月DD日') }}</a-col>
      </a-row>
      <table border="1" style="width: 100%;color:rgba(0, 0, 0, 0.85) ;">
        <thead class="thead">
          <tr>
            <td>序号</td>
            <td>品名</td>
            <td>规格</td>
            <td>批号</td>
            <td>产地</td>
            <td>单位</td>
            <td>数量</td>
            <td>单价</td>
            <td>金额</td>
          </tr>
        </thead>
        <tbody class="tbody">
          <tr v-for="(item,index) in data.AccountsaleDetails" :key="index">
            <td>{{ index+1 }}</td>
            <td>{{ item.ProductName||'&nbsp;' }}</td>
            <td>{{ item.Specifications||'&nbsp;' }}</td>
            <td>{{ item.BatchNumber||'&nbsp;' }}</td>
            <td>{{ item.Producer||'&nbsp;' }}</td>
            <td>{{ item.UnitName||'&nbsp;' }}</td>
            <td style="text-align: right;padding: 0px 5px">{{ item.Quantity.toFixed(2)||'&nbsp;' }}</td>
            <td style="text-align: right;padding: 0px 5px">{{ item.Price.toFixed(2)||'&nbsp;' }}</td>
            <td style="text-align: right;padding: 0px 5px">
              <el-statistic
                group-separator=","
                :precision="2"
                :value="Number(item.Amount)||0"
              ></el-statistic>
            </td>

          </tr>
          <tr>
            <td colspan="6">合计</td>
            <td style="text-align: right;padding: 0px 5px">{{ totalQuantity||'&nbsp;' }}</td>
            <td style="text-align: right;padding: 0px 5px">{{ totalPrice||'&nbsp;' }}
            </td>
            <td style="text-align: right;padding: 0px 5px"><el-statistic
              group-separator=","
              :precision="2"
              :value="totalAmount"
            ></el-statistic></td>
          </tr>
          <tr>
            <td colspan="6">总合计</td>
            <td style="text-align: right;padding: 0px 5px;">{{ totalQuantity||'&nbsp;' }}</td>
            <td style="text-align: right;padding: 0px 5px">{{ totalPrice||'&nbsp;' }}</td>
            <td style="text-align: right;padding: 0px 5px"><el-statistic
              group-separator=","
              :precision="2"
              :value="totalAmount"
            ></el-statistic></td>
          </tr>
          <tr>
            <td colspan="2">名称：</td>
            <td colspan="5">{{ data.Name||'&nbsp;' }}</td>
            <td>电话：</td>
            <td>{{ data.Phone||'&nbsp;' }}</td>
          </tr>
          <tr>
            <td colspan="2">地址：</td>
            <td colspan="5">{{ data.Address||'&nbsp;' }}</td>
            <td >传真：</td>
            <td>{{ data.fax||'&nbsp;' }}</td>
          </tr>
          <tr>
            <td colspan="2">网址：</td>
            <td colspan="5">{{ data.Website||'&nbsp;' }}</td>
            <td>邮箱：</td>
            <td>{{ data.Email||'&nbsp;' }}</td>
          </tr>
          <tr>
            <td colspan="2">销售单位(章)</td>
            <td colspan="5">&nbsp;</td>
            <td>制单：</td>
            <td>{{ data.Creator||'&nbsp;' }}</td>
          </tr>
        </tbody>
      </table>
    </div>
    <div style="position: fixed;bottom: 0;right: 0; borderTop: 1px solid #e9e9e9;padding: 10px 16px;background: #fff;width: 850px;text-align: right;"><a-button type="primary" v-print="print">打印</a-button></div>
  </div>
</template>

<script>
export default {
  props: {
    data: {
      type: Object,
      require: false,
      default: () => {}
    }
  },
  data () {
    return {
      print: {
        id: 'print-a',
        popTitle: ''
      }
    }
  },
  computed: {
    totalQuantity () {
      let num = 0
      this.data.AccountsaleDetails.forEach(item => {
        num = Number(item.Quantity || 0) + num
      })
      return num.toFixed(2)
    },
    totalPrice () {
      let num = 0
      this.data.AccountsaleDetails.forEach(item => {
        num = Number(item.Price || 0) + num
      })
      return num.toFixed(2)
    },
    totalAmount () {
      let num = 0
      this.data.AccountsaleDetails.forEach(item => {
        num = Number(item.Amount || 0) + num
      })
      return num
    }
  },
  methods: {

  },
  mounted () {

  }

}
</script>

<style lang="less" scoped>
.thead{
    td{
        text-align: center;
        font-size: 12px;
    }
}
.tbody{
    text-align: center;
    td{
      font-style: 12px;
    }
}
/deep/ .el-statistic .con .number{
  font-size: 12px;
  padding: 0;
}
/deep/ .el-statistic .con{
  justify-content: right;
}
@media print{
    @page{
        size: A4 !important;
    }

}
</style>
